<template>
    <view class="container">
        <view class="h">
            <view :class="'item ' + (status == 0 ? 'active' : '')" @tap="switchTab" data-index="0">
                <view class="txt">未使用</view>
            </view>
            <view :class="'item ' + (status == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
                <view class="txt">已使用</view>
            </view>
            <view :class="'item ' + (status == 2 ? 'active' : '')" @tap="switchTab" data-index="2">
                <view class="txt">已过期</view>
            </view>
        </view>

        <view class="b">
            <view class="coupon-form" v-if="status == 0">
                <view class="input-box">
                    <input class="coupon-sn" placeholder="请输入优惠码" :value="code" @input="bindExchange" />
                    <van-icon name="close" class="clear-icon" v-if="code.length > 0" @tap.native.stop.prevent="clearExchange" />
                </view>
                <view class="add-btn" @tap="goExchange">兑换</view>
            </view>

            <view class="help" v-if="status == 0">
                <van-icon name="question-o" />
                使用说明
            </view>

            <scroll-view class="coupon-list" :scroll-y="true" :scroll-top="scrollTop">
                <view :class="'item ' + (status == 0 ? 'active' : '')" v-for="(item, index) in couponList" :key="index">
                    <view class="tag">{{ item.tag }}</view>

                    <view class="content">
                        <view class="left">
                            <view class="discount">{{ item.discount }}元</view>
                            <view class="min">满{{ item.min }}元使用</view>
                        </view>
                        <view class="right">
                            <view class="name">{{ item.name }}</view>
                            <view class="time">有效期：{{ item.startTime }} - {{ item.endTime }}</view>
                        </view>
                    </view>

                    <view class="condition">
                        <text class="txt">{{ item.desc }}</text>
                        <image :src="item.pic" class="icon"></image>
                    </view>
                </view>

                <view class="page" v-if="showPage">
                    <view :class="'prev ' + (page <= 1 ? 'disabled' : '')" @tap="prevPage">上一页</view>
                    <view :class="'next ' + (count / size < page ? 'disabled' : '')" @tap="nextPage">下一页</view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            couponList: [],
            code: '',
            status: 0,
            page: 1,
            limit: 10,
            count: 0,
            scrollTop: 0,
            showPage: false,
            size: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getCouponList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getCouponList();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getCouponList: function () {
            let that = this;
            that.setData({
                scrollTop: 0,
                showPage: false,
                couponList: []
            });
            util.request(api.CouponMyList, {
                status: that.status,
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        scrollTop: 0,
                        couponList: res.data.list,
                        showPage: res.data.total > that.limit,
                        count: res.data.total
                    });
                }
            });
        },

        bindExchange: function (e) {
            this.setData({
                code: e.detail.value
            });
        },

        clearExchange: function () {
            this.setData({
                code: ''
            });
        },

        goExchange: function () {
            if (this.code.length === 0) {
                util.showErrorToast('请输入兑换码');
                return;
            }
            let that = this;
            util.request(
                api.CouponExchange,
                {
                    code: that.code
                },
                'POST'
            ).then(function (res) {
                if (res.errno === 0) {
                    that.getCouponList();
                    that.clearExchange();
                    uni.showToast({
                        title: '领取成功',
                        duration: 2000
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        nextPage: function (event) {
            var that = this;
            if (this.page > that.count / that.limit) {
                return true;
            }
            that.setData({
                page: that.page + 1
            });
            this.getCouponList();
        },

        prevPage: function (event) {
            if (this.page <= 1) {
                return false;
            }
            var that = this;
            that.setData({
                page: that.page - 1
            });
            this.getCouponList();
        },

        switchTab: function (e) {
            this.setData({
                couponList: [],
                status: e.currentTarget.dataset.index,
                page: 1,
                limit: 10,
                count: 0,
                scrollTop: 0,
                showPage: false
            });
            this.getCouponList();
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
    min-height: 100%;
}

.container {
    background: #f4f4f4;
    min-height: 100%;
    padding-top: 30rpx;
}

.container .h {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    background: #fff;
    height: 84rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.container .h .item {
    display: inline-block;
    height: 82rpx;
    width: 50%;
    padding: 0 15rpx;
    text-align: center;
}

.container .h .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #333;
    font-size: 30rpx;
    width: 170rpx;
}

.container .h .item.active .txt {
    color: #ab2b2b;
    border-bottom: 4rpx solid #ab2b2b;
}

.container .b {
    margin-top: 85rpx;
    height: auto;
}

.container .b .coupon-form {
    height: 110rpx;
    width: 100%;
    background: #fff;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    display: flex;
}

.container .b .input-box {
    flex: 1;
    height: 70rpx;
    color: #333;
    font-size: 24rpx;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4rpx;
    margin-right: 30rpx;
}

.container .b .input-box .coupon-sn {
    position: absolute;
    top: 10rpx;
    left: 30rpx;
    height: 50rpx;
    width: 100%;
    color: #000;
    line-height: 50rpx;
    font-size: 24rpx;
}

.container .b .clear-icon {
    position: absolute;
    top: 25rpx;
    right: 18rpx;
    z-index: 2;
    display: block;
    background: #fff;
}

.container .b .add-btn {
    height: 70rpx;
    border: none;
    width: 168rpx;
    background: #b4282d;
    border-radius: 0;
    line-height: 70rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
}

.container .b .add-btn.disabled {
    background: #ccc;
}

.container .b .help {
    height: 72rpx;
    line-height: 72rpx;
    text-align: right;
    padding-right: 30rpx;
    background-size: 28rpx;
    color: #999;
    font-size: 24rpx;
}

.container .b .coupon-list {
    width: 750rpx;
    height: 100%;
    overflow: hidden;
}

.container .b .item {
    position: relative;
    height: 290rpx;
    background: #ccc7c7;
    margin-bottom: 30rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    padding-top: 52rpx;
}

.container .b .item.active {
    background: linear-gradient(to right, #cfa568, #e3bf79);
}

.container .b .tag {
    height: 32rpx;
    background: #a48143;
    padding-left: 16rpx;
    padding-right: 16rpx;
    position: absolute;
    left: 20rpx;
    color: #fff;
    top: 20rpx;
    font-size: 20rpx;
    text-align: center;
    line-height: 32rpx;
}

.container .b .content {
    margin-top: 24rpx;
    margin-left: 40rpx;
    display: flex;
    margin-right: 40rpx;
    flex-direction: row;
}

.container .b .content .left {
    flex: 1;
}

.container .b .discount {
    font-size: 50rpx;
    color: #b4282d;
}

.container .b .min {
    color: #fff;
}

.container .b .content .right {
    width: 400rpx;
}

.container .b .name {
    font-size: 44rpx;
    color: #fff;
    margin-bottom: 14rpx;
}

.container .b .time {
    font-size: 24rpx;
    color: #fff;
    line-height: 30rpx;
}

.container .b .condition {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 78rpx;
    background: rgba(0, 0, 0, 0.08);
    padding: 24rpx 40rpx;
    display: flex;
    flex-direction: row;
}

.container .b .condition .txt {
    display: block;
    height: 30rpx;
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    line-height: 30rpx;
    color: #fff;
}

.container .b .condition .icon {
    margin-left: 30rpx;
    width: 24rpx;
    height: 24rpx;
}

.container .b .page {
    width: 750rpx;
    height: 108rpx;
    background: #fff;
    margin-bottom: 20rpx;
}

.container .b .page view {
    height: 108rpx;
    width: 50%;
    float: left;
    font-size: 29rpx;
    color: #333;
    text-align: center;
    line-height: 108rpx;
}

.container .b .page .prev {
    border-right: 1px solid #d9d9d9;
}

.container .b .page .disabled {
    color: #ccc;
}
</style>
